<template>
  <qs-page>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <!--isFullScreen 可以实其全屏显示-->
    <ourLoading
      isFullScreen
      :active="loadstatus"
      :text="loadstxt"
      color="#63E5CB"
      textColor="#63E5CB"
    />
    <view class="u-padding-20" v-if="!hasLogin">
      <u-empty text="请先登陆" mode="permission"></u-empty>
    </view>

    <view v-else>
      <view v-if="address_is_empty === true" class="empty">
        <navigator
          url="/pages/order/address/index?source=1"
          class="address-section bg_light"
        >
          <center>添加地址</center>
        </navigator>
      </view>
      <view v-else>
        <navigator
          url="/pages/order/address/index?source=1"
          class="address-section bg_light"
        >
          <view class="order-content">
            <text
              class="customicon customicon-dizhi"
              style="width: 60px; text-align: center"
            ></text>
            <view class="cen">
              <view class="top" style="text-align: left">
                <text class="name">{{ addressData.consignee }}</text>
                <text class="mobile">{{ addressData.mobile }}</text>
              </view>
              <text class="address" style="text-align: left"
                >{{ addressData.province_name }}{{ addressData.city_name
                }}{{ addressData.district_name }}{{ addressData.address }}</text
              >
            </view>
            <text
              class="customicon customicon-dibudaohanglan-"
              style="width: 50px; text-align: center"
            ></text>
          </view>
          <image
            class="a-bg"
            src=""
          ></image>
        </navigator>
      </view>
      <u-empty
        text="没有数据"
        mode="data"
        :show="goodsList.length === 0"
        v-if="loadstatus == false"
      ></u-empty>
      <view class="u-padding-10" v-if="goodsList.length > 0">
        <view
          class="g-item b-b"
          v-for="(item, index) in goodsList"
          :key="index"
        >
          <u-row gutter="0" justify="space-between">
            <u-col span="2"><image :src="item.litpic"></image></u-col>
            <u-col span="10">
              <view class="title clamp">{{ item.product_name }}</view>
              <view class="spec" v-if="item.data != ''">{{ item.data }}</view>
              <view class="price-box right">
                <text class="price">{{ item.spec_price }}</text>
                <text class="number">* {{ item.product_num }}</text>
              </view>
            </u-col>
          </u-row>
        </view>

        <!-- 金额明细 -->
        <u-row
          gutter="0"
          justify="space-between"
          class="u-p-t-15 u-p-b-15 u-p-l-30 u-p-r-30 b-b"
        >
          <u-col span="2">金额</u-col>
          <u-col span="10" text-align="right">
            {{ totalmoney }}
          </u-col>
        </u-row>
        <u-row
          gutter="0"
          justify="space-between"
          class="u-p-t-15 u-p-b-15 u-p-l-30 u-p-r-30 b-b"
        >
          <u-col span="2">运费</u-col>
          <u-col span="10" text-align="right">
            {{ shipping_fee }}
          </u-col>
        </u-row>
        <u-row
          gutter="0"
          justify="space-between"
          class="u-p-t-15 u-p-b-15 u-p-l-30 u-p-r-30 b-b"
        >
          <u-col span="2">备注</u-col>
          <u-col span="10" text-align="left">
            <input
              class="desc"
              type="text"
              v-model="postscript"
              placeholder="请填写备注信息"
              placeholder-class="placeholder"
            />
          </u-col>
        </u-row>

        <!-- 底部 -->
        <view class="footer">
          <view class="price-content">
            <text>实付款</text>
            <text class="price-tip"></text>
            <text class="price">{{ realmoney }}</text>
          </view>
          <text class="submit" @click="submit">
            <button type="primary">提交订单</button>
          </text>
        </view>
      </view>
    </view>
  </qs-page>
</template>


<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      goodsList: [],
      hasLogin: false,
      loadStatus: "loadmore",
      loadstatus: false,
      loadstxt: "loading...",
      address_is_empty: true,
      addressData: [],
      totalmoney: 0,
      shipping_fee: "",
      realmoney: 0,
      postscript: "",
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  onLoad() {
    this.hasLogin = this.$store.getters.loginFlag;
    this.getpagecontrac();

    this.$api("order.address_list", {})
      .then((res) => {
        if (res.code == 200) {
          console.log(res);
          if (Array.isArray(res.data)) {
            this.address_is_empty = false;
            this.addressData = res.data[0];
          }
        }
      })
      .catch((e) => {});
  },
  watch: {
    //显示空白页
    addressData(e) {
      let empty = e == undefined || e.length <= 0 ? true : false;
      if (this.address_is_empty !== empty) {
        this.address_is_empty = empty;
      }
    },
  },
  methods: {
    submit() {
      if (this.addressData == undefined || this.addressData.length == 0) {
		this.$u.toast("没有收货地址");
        return;
      }

      if (this.goodsList == undefined && this.goodsList.length == 0) {
		this.$u.toast("订单中没有商品");
        return;
      }

      return new Promise((resolve, reject) => {
        this.loadstatus = true;
        this.loadstxt = "订单提交中";
        this.$api("shop.order_save", {
          createmode: "car",
          addrid: this.addressData.addr_id,
          postscript: this.postscript,
        })
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              //this.$tools.routerTo('/pages/order/order_view_payment','order_id='+res.data.order_id);
              this.$Router.push({
                path: "/pages/order/order_view_payment",
                query: { order_id: res.data.order_id },
              });
            }
            this.loadstatus = false;
          })
          .catch((e) => {
            this.loadstatus = false;
          });
      });
    },
    getpagecontrac() {
      return new Promise((resolve, reject) => {
        this.loadstatus = true;
        this.loadstxt = "加载中";
        this.$api("shop.car_list", {})
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.totalmoney = res.data.totalmoney;
              this.shipping_fee = res.data.shipping_fee;
              this.realmoney = res.data.realmoney;
              this.goodsList = res.data.list;
            }
            this.loadstatus = false;
          })
          .catch((e) => {
            this.loadstatus = false;
          });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.address-section {
  padding: 30upx 0;
  position: relative;
  width: 100%;
  text-align: center;
  background: $u-tabbar-top-bg;

  .order-content {
    display: flex;
    align-items: center;
  }

  .icon-shouhuodizhi {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90upx;
    color: #888;
    font-size: 44upx;
  }

  .cen {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-size: 28upx;
    color: $uni-text-color;
  }

  .name {
    font-size: 34upx;
    margin-right: 24upx;
  }

  .address {
    margin-top: 16upx;
    margin-right: 20upx;
    color: $uni-text-color;
  }

  .icon-you {
    font-size: 32upx;
    color: $uni-text-color;
    margin-right: 30upx;
  }

  .a-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 5upx;
  }
}

.g-item {
  position: relative;
  padding: 20rpx;
  image {
    flex-shrink: 0;
    display: block;
    width: 100rpx;
    height: 100rpx;
    border-radius: 4upx;
    margin: 10rpx;
  }
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 995;
  display: flex;
  align-items: center;
  width: 100%;
  height: 180rpx;
  justify-content: space-between;
  font-size: 30upx;
  z-index: 998;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  padding-bottom: 90rpx;
  padding-top: 60upx;

  .price-content {
    padding-left: 30upx;
  }
  .price-tip {
    color: #c40000;
    margin-left: 8upx;
  }
  .price {
    font-size: 36upx;
    color: #c40000;
  }
  .submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300rpx;
    height: 80rpx;
    color: #fff;
    font-size: 32upx;
  }
}
</style>
